<template>
	<view>
		<view class="bg"></view>
		<head-navbar :back="true" :bgColor="'none'">
			<view >
				<text style="color: #FFFFFF;">转盘</text>
			</view>
			<view slot="right">
				<text style="color: #FFFFFF;" @click="toPage(0,'/pages/group/prize?childUserId=' + childUserId)">奖品列表</text>
			</view>
		</head-navbar>
		<view class="content">
				<view class="read">
					<view class="readBox">
						<view class="title">抽奖说明</view>
						<view class="readContent"><rich-text :nodes="ruler"></rich-text></view>
				</view>
				<view class="home-wheel">
				    <almost-lottery
				      :prize-list="prizeList"
				      :ring-count="3"
				      :duration="3"
				      :canvas-width="canvasData.width"
				      :canvas-height="canvasData.height"
				      :prize-index="prizeIndex"
				      @reset-index="prizeIndex = -1"
				      @draw-start="handleDrawStart"
				      @draw-end="handleDrawEnd"
				      @finish="handleDrawFinish"
				      v-if="prizeList.length"
				    />
				  <!--  <text class="almost-lottery__tip" v-else>奖品准备中...</text> -->
				  </view>
				  <!-- <view class="home-result">
				    <text class="home-result__text">{{ targetName }}</text>
				  </view> -->
				  <!-- <view class="home-action" @tap="handleInitCanvas">
				    <text class="home-action__text">重新生成-测试用</text>
				  </view> -->
				</view>
				<uni-popup ref="popup" type="center">
					<view class="popBox">
						<image src="../../static/img/face.png" v-if="status == 1"></image>
						<image src="../../static/img/faceNo.png" v-if="status == 0"></image>
						<view class="bottoText" :class="{bottoText2:status ==0}">{{targetName}}</view>
						<view class='gameBtn' @click="agin">再来一次</view>
						<image @click="toClose" class="close" src="../../static/img/close1.png" v-if="status == 1"></image>
						<image @click="toClose" class="close" src="../../static/img/close2.png" v-if="status == 0"></image>
						<image class="propBg" src="../../static/img/prop1.png"  v-if="status == 1"></image>
						<image class="propBg" src="../../static/img/prop2.png"  v-if="status == 0"></image>
					</view>
				</uni-popup>
		</view>
	</view>
</template>

<script>
	 import AlmostLottery from '@/components/almost-lottery/almost-lottery.vue'
	import * as api from '../../api/group/index'
	export default {
		components: {
		  AlmostLottery
		},
		data() {
			return {
				ruler:'',
				status:true,
				showTitle: true,
				modal: false, // 展示modal模块
				// canvas 宽高
				canvasData: {
				  width: 240,
				  height: 240
				},
				// 奖品数据
				prizeList: [],
				// 中奖下标
				prizeIndex: -1,
				// 中奖类目名称
				targetName: '',
				// 是否由前端控制概率
				isFrontend: true,
				// 权重随机数的最大值
				weightTotal: 0,
				// 权重数组
				weightArr: [],
				childUserId:null,
				groupBookId:null,
				turntableId:null,
			};
		},
		onLoad(option) {
			this.childUserId = option.childUserId
			this.groupBookId = option.groupBookId
			console.log(this.childUserId)
			this.getGame()
			this.getExplainById()
		},
		onShow() {
		},
		methods:{
			getExplainById(){
				api.getExplainById({request:{id:5}}).then(res=>{
					this.ruler = res.data.dataBody.content
				}).catch(err=>{
					
				})
			},
			// 重新生成
			// handleInitCanvas () {
			//   this.prizeList = []
			//   this.getPrizeList({})
			// },
			// // 获取奖品列表
			// getPrizeList () {
			//   uni.showLoading({
			//     title: '奖品准备中...'
			//   })
			//   // 模拟请求奖品列表
			//   let stoTimer = setTimeout(() => {
			//     clearTimeout(stoTimer)
			//     stoTimer = null
			    
			//     // stock 奖品库存
			//     // weight 中奖概率，数值越大中奖概率越高
			//     this.prizeList = [
			//       { prizeId: 1, name: '0.1元现金', stock: 10, weight: 1, imgSrc: '/static/lottery-prize/git.png' },
			//       { prizeId: 2, name: '10元现金', stock: 0, weight: 0 },
			//       { prizeId: 3, name: '5元话费', stock: 1, weight: 0 },
			//       { prizeId: 4, name: '50元现金', stock: 0, weight: 0 },
			//       { prizeId: 5, name: '1卷抽纸', stock: 3, weight: 3 },
			//       { prizeId: 6, name: '0.2元现金', stock: 8, weight: 2 },
			//       { prizeId: 7, name: '谢谢参与', stock: 100, weight: 10000 },
			//       { prizeId: 8, name: '100金币', stock: 100, weight: 1000 }
			//     ]
			    
			//     // 计算出权重的总和并生成权重数组
			//     if (this.isFrontend) {
			//       this.prizeList.forEach((item) => this.weightTotal += item.weight)
			//       this.weightArr = this.prizeList.map((item) => item.weight)
			//     }
			//   }, 500)
			// },
			// 本次抽奖开始
			handleDrawStart () {
				if(this.turntableId == null){
					uni.showToast({
						title:'数据未返回，请稍后再试',
						icon:'none'
					})
					return
				}
			  this.targetName = ''
			  let list = [...this.prizeList]
			  api.luckDraw({request:{childUserId:this.childUserId,turntableId:this.turntableId,groupBookId:this.groupBookId}}).then(res=>{//userId(用户ID):1,turntableId(转盘ID)
			  	list.forEach((item, index) => {
			  	  if (item.prizeId == res.data.dataBody.id) {
			  	    this.prizeIndex = index
			  	  }
			  	})
			  }).catch(err=>{
			  	
			  })
			  // var that = this
			  // setTimeout(function(){
			  // list.forEach((item, index) => {
				 //  console.log(item.prizeId)
			  // 	  if (item.prizeId == 45) {
			  // 	    // 中奖下标
			  // 	    that.prizeIndex = index
			  // 	  }
			  // 	})
			  // },1000)
			},
			// 本次抽奖结束
			handleDrawEnd () {
			  // 旋转结束后，可以执行拿到结果后的逻辑
			  let prizeName = this.prizeList[this.prizeIndex].name
			  let prizeStock = this.prizeList[this.prizeIndex].stock
			  this.$refs.popup.open()
			  // this.targetName = prizeName === '谢谢参与' ? prizeName : prizeStock ? `恭喜您，获得 ${prizeName}` : '很抱歉，您来晚了，当前奖品已无库存'
			  this.targetName = '恭喜获得' + prizeName
			},
			// 抽奖转盘绘制完成
			handleDrawFinish () {
			  console.log('抽奖转盘绘制完成')
			  
			},
			getGame(){
				api.getTurntableByGroupBookId({request:{childUserId:this.childUserId,groupBookId:this.groupBookId}}).then(res=>{//"groupBookId：团类型
				    let prizeInfos = res.data.dataBody.prizeInfos
					this.turntableId = res.data.dataBody.id
					for(var i=0;i<prizeInfos.length;i++){
						if(prizeInfos[i].prizeImg == '' || prizeInfos[i].prizeImg == null){
							prizeInfos[i].prizeImg = require('../../static/icon/zuanshi.png')
						}
						this.prizeList.push({prizeId: prizeInfos[i].id, name: prizeInfos[i].prizeName, stock: prizeInfos[i].prizeNum, weight: prizeInfos[i].probability, imgSrc: prizeInfos[i].prizeImg})
					}
					console.log(this.prizeList)
				     // if (this.isFrontend) {
				     //   this.prizeList.forEach((item) => this.weightTotal += item.weight)
				     //   this.weightArr = this.prizeList.map((item) => item.weight)
				     // }
				}).catch(err=>{
				})
			},
			toClose(){
				 this.$refs.popup.close()
			},
			agin(){
				this.$refs.popup.close()
				this.handleDrawStart()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btns{
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 100rpx;
		color: #FFFFFF;
		margin: 0rpx auto;
		margin-top: 50rpx;
		background: linear-gradient(180deg, #d25ecd, #5c19dc);;
		border: 1rpx solid #f4f4f4;
	}
	.popBox{
		position: relative;
		padding: 20rpx;
		width: 500rpx;
		height: 320rpx;
		background-size: 100% 100%;
		text-align: center;
		border-radius: 20rpx;
		image{
			width: 138rpx;
			height: 138rpx;
		}
		.propBg{
			border-radius: 20rpx;
			position: absolute;
			z-index: -1;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
		.bottoText{
			font-size: 30rpx;
			color: #FF5C02;
		}
		.bottoText2{
			color: #949494;
		}
		.gameBtn{
			width: 190rpx;
			height: 60rpx;
			font-size: 25rpx;
			line-height: 60rpx;
			text-align: center;
			color: #FFFFFF;
			background: #FF5C02;
			margin: 0 auto;
			margin-top: 20rpx;
			border-radius: 100rpx;
		}
		.close{
			position: absolute;
			right: -25rpx;
			top: -25rpx;
			width: 80rpx;
			height: 80rpx;
		}
	}
	.content{
		position: relative;
		z-index: 99;
	}
	.bg{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url(../../static/img/ruler_bg.png);
		background-size: cover;
		z-index: 0;
	}
	page {
		position: relative;
		width: 100%;
		min-height: 100%;
	}
	.content {
		.read{
			padding: 20rpx;
			.readBox{
				background-image: url(../../static/img/readBg.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				padding: 30rpx;
				.title{
					text-align: center;
					margin-bottom: 20rpx;
					color: #E4441A;
					font-size: 32rpx;
					.readContent{
						view {
							padding: 10rpx 0;
						}
					}
				}
			}
		}
	}
	$wheelBgUrl: '../../static/almost-lottery/almost-lottery__bg';
	.home-wheel {
	  text-align: center;
	  margin-top: 180rpx;
	}
	.almost-lottery__tip {
	  font-size: 24rpx;
	}
	.home-action {
	  position: absolute;
	  left: 0;
	  right: 0;
	  bottom: 40rpx;
	  width: 260rpx;
	  height: 80rpx;
	  display: flex;
	  flex-direction: row;
	  justify-content: center;
	  align-items: center;
	  border-radius: 10rpx;
	  text-align: center;
	  background-color: red;
	  margin: 0 auto;
	}
	.home-action__text {
	  color: #FFFFFF;
	  font-size: 24rpx;
	}
</style>
